<template>
  <div class="header">
    <div class="layout-breadcrumb">
      <div class="menu-control">
        <Icon
          v-show="!smallMenu"
          type="md-contract"
          size="24"
          @click="changeMenu"
        />
        <Icon
          v-show="smallMenu"
          type="md-expand"
          size="24"
          @click="changeMenu"
        />
      </div>
      <div class="title">我的博客管理系统</div>
    </div>
    <div class="avatar-box">
      <span href="javascript:void(0)">
        <img
          src="../assets/images/avatar.jpg"
          alt
        />
        {{ username }}
      </span>
      <span class="item" @click="loginOut">
        <Icon type="ios-power" size="18"/>
      </span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      smallMenu: localStorage.getItem('smallMenu') === 'Y',
      username: sessionStorage.username,
    };
  },
  methods: {
    loginOut() {
      window.sessionStorage.clear();
      this.$router.push({ path: '/login' });
    },
    changeMenu() {
      this.smallMenu = !this.smallMenu;
      this.$emit('changeMenu');
    }
  }
};
</script>
<style scoped lang="less">
@mainColor: rgb(187, 187, 187);
.header {
  position: fixed;
  top: 0;
  right: 0;
  left: 200px;
  z-index: 11;
  height: 50px;
  line-height: 50px;
  background: #fff;
  padding: 0;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  // transition: all 0.2s ease-in-out;
  display: block;
  .layout-breadcrumb {
    padding-left: 65px;
    .menu-control {
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 50px;
      box-shadow: 3px 0 3px #ddd;
      display: flex;
      justify-content: center;
      align-items: center;
      i {
        cursor: pointer;
        &:hover {
          color: #F99C34;
        }
      }
    }
    .title {
      font-size: 18px;
      font-weight: 700;
    }
  }
  .ivu-breadcrumb {
    display: inline-block;
  }
  .avatar-box {
    position: absolute;
    right: 16px;
    padding: 0 10px;
    top: 0px;
    display: flex;
    .trigger-box{
      padding: 0 12px;
    }
    span {
      color: #808695;
    }
    img {
      display: inline-block;
      margin-right: 5px;

      width: 25px;
      height: 25px;
      border-radius: 50%;
      vertical-align: middle;
    }
    &>.item:hover{
      cursor: pointer;
      background: #f8f8f9;
    }
  }
  .item {
    margin-left: 5px;
    cursor: pointer;
    text-align: left;
    position: relative;

    &:hover{
      .ico{
        color: @mainColor
      }
    }
  }
}

</style>
